<template>
  <div style="padding: 20px">
    <el-button type="primary" size="small"  @click="add">
      新增命名空间
    </el-button>
    <el-table
      stripe
      border
      :data="namespaceData"
      style="width: 100%;margin-top: 15px"
      ref = 'namespaceTable'
      @selection-change="handlerSelectionChange"
    >
      <el-table-column
        type="selection"
        width="55">
      </el-table-column>
      <el-table-column
        label="序号">
        <template v-slot="scope">
          <span>{{(pageParams.pageNum - 1) * pageParams.pageSize + scope.$index + 1}}</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="namespace"
        label="命名空间ID">
      </el-table-column>
      <el-table-column
        prop="namespaceShowName"
        label="命名空间名称">
      </el-table-column>
      <el-table-column
        prop="quota"
        label="配额">
      </el-table-column>
      <el-table-column
        prop="configCount"
        label="配置数量">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型">
      </el-table-column>
      <el-table-column
        prop="namespaceDesc"
        label="描述">
      </el-table-column>
      <el-table-column
        prop="options"
        label="操作"
        width="150">
        <template v-slot="scope">
          <el-button
            size="mini"
            :disabled='scope.row.namespaceShowName==="public"'
            @click="deleteOne(scope.$index,scope.row)">
            删除
          </el-button>
          <el-button
            size="mini"
            type="danger"
            :disabled='scope.row.namespaceShowName==="public"'
            @click="change(scope.$index,scope.row)">
            修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页 -->
    <div class="pagination" style="margin-top:20px;text-align:center;">
      <el-pagination
        background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        layout="total,prev, sizes, pager, next,jumper"
        :current-page.sync="pageParams.pageNum"
        :page-size="pageParams.pageSize"
        :page-sizes="[10,20,50,100]"
        :total="namespaceData.length">
      </el-pagination>
    </div>
    <el-button size="small" style="margin-top: 10px"
               type="primary"
               @click = "deleteMany"
               :disabled="this.selectItems.length===0">
      批量删除
    </el-button>
    <el-dialog :title="dialogTitle" :visible.sync="dialogFormVisible">
      <!-- 在el-dialog中进行嵌套el-form实现弹出表格的效果 -->
      <el-form :model="namespaceForm" ref="namespaceForm" label-width="120px" :rules="rules">
        <el-form-item label="命名空间ID" prop="namespace">
          <el-input v-model="namespaceForm.namespace" placeholder="不填自动生成" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="命名空间名" prop="namespaceShowName">
          <el-input v-model="namespaceForm.namespaceShowName" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="命名空间描述" prop="namespaceDesc">
          <el-input v-model="namespaceForm.namespaceDesc" auto-complete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <!-- 设置触发更新的方法 -->
        <el-button type="primary" @click="submit">确 定</el-button>
      </div>
    </el-dialog>
  </div>

</template>

<script>
export default {
  name: "namespace",
  mounted(){
    this.getRequest('http://localhost:8848/nacos/v1/console/namespaces').then(res=>{
      console.log(res.data);
      this.namespaceData = res.data;
    })
  },
  data(){
    return{
      namespaceData:{},
      selectItems:[],
      dialogFormVisible: false,
      namespaceForm: {},
      rowIndex:null,
      dialogTitle: '',
      pageParams: {
        pageNum: 1,
        pageSize: 10,
      },
      rules:{
        namespace:[{required: false,message:'请输入命名名称',trigger:'blur'}],
        namespaceShowName:[{required: true,message:'请输入命名名称',trigger:'blur'}],
        namespaceDesc:[{required: true,message:'请输入命名空间描述',trigger:'blur'}]
      }
    }
  },
  methods:{
    add(){
      this.dialogTitle = '新增命名空间';
      this.dialogFormVisible = true;
    },
    deleteOne(index,row){
      this.$confirm('此操作将永久删除命名, 是否执行?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.namespaceData.splice(index,1);
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    change(index,row)
    {
      this.dialogTitle ='修改命名空间';
      // 将数据的index传递过来用于实现数据的回显
      this.namespaceForm = row;
      console.log(this.namespaceForm);
      // 设置对话框的可见
      this.dialogFormVisible = true;
      this.rowIndex=index;

    },
    handlerSelectionChange(val){
      console.log(val);
      this.selectItems = val;
    },
    // 弹窗肯定
    submit() {
      this.$refs.namespaceForm.validate((valid)=>
      {
        if(valid)
        {
          if (this.dialogTitle === '新增命名空间') {
            let data = {
              customNamespaceId: this.namespaceForm.namespace,
              namespaceName: this.namespaceForm.namespaceShowName,
              namespaceDesc: this.namespaceForm.namespaceDesc
            }
            console.log(data)
            this.postRequest('http://localhost:8848/nacos/v1/console/namespaces',data).then((res)=>{
              if(res)
              {
                console.log(res);
              }
            })
          }else{
            let data = {
              namespaceId: this.namespaceForm.namespace,
              namespaceName: this.namespaceForm.namespaceShowName,
              namespaceDesc: this.namespaceForm.namespaceDesc
            }
            console.log(data)
            this.putRequest('http://localhost:8848/nacos/v1/console/namespaces',data).then((res)=>{
              if(res)
              {
                console.log(res);
              }
            })
          }
          this.namespaceForm = {};
          this.dialogFormVisible = false;
        }else
        {
          this.$message.error('请按要求输入数据');
          return false;
        }
      })

    },
    deleteMany()
    {
      this.$confirm('确认批量删除?', '批量删除操作', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
      }).then(() => {
        this.selectItems.forEach(item=>{
          console.log(item.number);
          this.namespaceData.delete(item.number);
        })
        this.$message({
          type: 'success',
          message: '批量删除成功!'
        });
        //每次选择后清空
        this.$refs.namespaceTable.clearSelection();
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消批量删除'
        });
      });
    },
    handleSizeChange(val) {
      this.pageParams.pageNum = 1;
      this.pageParams.pageSize = val;
    },

    handleCurrentChange(val) {
      this.pageParams.pageNum = val;
    }
  },

}
</script>

<style scoped>

</style>
